/*
* @Author: jh
* @Date: 2018/1/16
* @Last Modified by: jh
* @Last Modified time: 2018/2/7
* @description: 文件列表
*/
<template>
    <div>
        <el-form-item label="文件上传" :label-width="labelWidth">
            <el-row>
                <el-col :span="22">
                    <csUploadBtn
                        :fileType="this.fileType"
                        :businessId="this.businessId"
                        :industryId="this.industryId"
                        :isShowFileChildType="isShowSelect"
                        uploadType="all"
                        :getFileUploadedReturnData="getFileUploadedReturnDataFun"
                    ></csUploadBtn>
                </el-col>
            </el-row>
            <el-row  :gutter="20">
                <el-col :span="20" >
                    <el-row v-for="(item,index) in fileShowListArr" :key="item.name" class="showList">
                        <el-col :span="6">{{new Date() | moment("YYYY-MM-DD") }}</el-col>
                        <el-col :span="14" >
                            <el-button @click="prevFile(item.id,item.fileName)" type="text">
                                <tz-icon-file-type :fileType="item.fileName"></tz-icon-file-type>
                                <span style="margin-left: 5px;">{{item.fileName}}</span>
                            </el-button>
                        </el-col>
                        <el-col :span="4" >
                            <a  @click="downFile(item.id)" class="operate" v-if="hasDownloadButton"><i class="el-icon-download"></i></a>
                            <a  @click="delFile(item.id,index)"><i class="el-icon-delete"></i></a>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-form-item>
    </div>
</template>

<script type="text/ecmascript-6">
    import mined from './mixin';
    export default {
        mixins: [mined],
        data() {
            return {
                status: '',
                percentage: 0,
                fileShowListArr: [],
            }
        },
        watch: {
        },
        props: {
            labelWidth: {
                type: String,
                default: '80px'
            },
            title: {
                type: String,
                default() {
                    return '';
                }
            },
            // 文件类型
            fileType: {
                type: String,
                default() {
                    return '';
                }
            },
            fileChildType: {
                type: String,
                default() {
                    return '';
                }
            },
            // 业务id
            businessId: {
                type: String,
                default() {
                    return '';
                }
            },
            // 行业id
            industryId: {
                type: String,
                default() {
                    return '';
                }
            },
            // 是否显示搜索框
            isShowSearch: {
                type: Boolean,
                default() {
                    return true
                }
            },
            // 是否显示文件类型
            isShowSelect: {
                type: Boolean,
                default() {
                    return true
                }
            },
            // 是否拟投资
            isEstablish: {
                type: Boolean,
                default() {
                    return false
                }
            },
            // 是否显示编辑按钮
            isFileEdit: {
                type: Boolean,
                default() {
                    return true
                }
            },
            // 是否显示工具栏(包括下拉框、搜索框、编辑按钮)
            isAllToolbar: {
                type: Boolean,
                default() {
                    return true
                }
            },
            // 是否显示 下载按钮
            hasDownloadButton: {
                type: Boolean,
                default() {
                    return true
                }
            },
            //文件成功返回的数据
            getFileUploadedReturnData: { //有一个参数 fileList
                type: Function,
                default: function () {}
            },
            //删除文件的id
            deleteFileId: {
                type: Function,
                default: function () {}
            }
        },
        mounted() {
        },
        methods: {
            //文件成功返回的数据
            getFileUploadedReturnDataFun(arr) {//调用父组件的方法
                arr.map((item)=>{
                    this.fileShowListArr.push(item)
                })
                this.getFileUploadedReturnData(arr) //返回上传文件的信息 数组包对象
            },
            //删除上传的文件
            delFile(id,index) {
                this.deleteFile(id,index)  //调用删除文件的方法
            },
            //预览文件
            prevFile( id,name ) {
                this.previewFileCheck(id, name)
            },
            //下载文件
            downFile(id) {
                this.downloadFile(id)  //调用下载文件的方法
            },
        },
        components: {
            'csUploadBtn': require('../upload-btn'),
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .showList{
        line-height: 50px;
        .el-col{
            i{
                font-size: 16px;
            }
        }
    }
    .operate{
        margin-right: 20px;
    }
</style>
